<template>
  <div class="resources">
    <Header title="气象环保"></Header>
    <Nav></Nav>
    <!-- 地图右侧列表 -->
    <div class="map-right-box">
      <router-link to="road" :class="{active:isActive==0}">
        <img src="@/assets/images/map-right-road.png" alt />
        <img class="active" src="@/assets/images/map-right-roadA.png" alt />
        路况
      </router-link>
      <router-link to="flow" :class="{active:isActive==1}">
        <img src="@/assets/images/map-right-flow.png" alt />
        <img class="active" src="@/assets/images/map-right-flowA.png" alt />
        客流
      </router-link>
      <router-link to="weather" :class="{active:isActive==2}">
        <img src="@/assets/images/map-right-weather.png" alt />
        <img class="active" src="@/assets/images/map-right-weatherA.png" alt />
        气象
      </router-link>
      <router-link to="report" :class="{active:isActive==3}">
        <img src="@/assets/images/map-right-report.png" alt />
        <img class="active" src="@/assets/images/map-right-reportA.png" alt />
        上报
      </router-link>
    </div>
    <!-- 弹窗 -->
    <div class="info-box">
		<h3>郑州</h3>
		<p>小雨转阴天</p>
		<p>15℃-8℃</p>
		<p>东北风2-3级</p>
		<router-link to="weatherInfo">详情</router-link>
    </div>

    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :double-click-zoom="false"
    >
    <!-- <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="1" :stroke-weight="0" fillColor="#C9E9A8" :editing="true" @lineupdate="updatePolygonPath"/> -->
     <bm-boundary name="河南省" :strokeWeight="2" :stroke-opacity="1" stroke-color="#06CB62" fillColor="#BFEDD4"></bm-boundary>
      <bm-marker :position="{lng: 113.637098, lat: 34.755623}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      <bm-label content="郑州" :labelStyle="{color: '#333', fontSize : '12px',borderColor:'#06CB62', borderRadius:'2px',padding:'0 4px'}" :offset="{width: -5, height: 30}"/>
    </bm-marker>
   
    </baidu-map>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
export default {
  name: "road",
  components: {
    Header,
    Nav
  },
  data() {
    return {
      center: { lng: 113.027975, lat: 34.51921 },
      zoom: 7,
      // 地图右侧列表 是否选中 0路况 1客流  2气象  3上报
      isActive: 2,
       
    };
  },
  methods: {
     
  }
};
</script>
<style lang="less" scope>
.resources {
  position: relative;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

.map {
  width: 100%;
  height: 100vh;
}

.info-box{
	position: absolute;
	top:26%;
	left:50%;
	transfrom: translate(-50%,-50%);
	width: 280/7.5vw;
	padding:10/7.5vw;
	border-radius:10/7.5vw;
	background-color: rgba(255,255,255,.8);
	box-sizing: border-box;
	z-index: 100;
	h3{
		line-height: 72/7.5vw;
		font-size: 32/7.5vw;
		color:#3285FF;
	}
	p{
		font-size: 24/7.5vw;
		color: #333;
	}
	a{
		position: absolute;
		bottom:10/7.5vw;
		right:10/7.5vw;
		color: #F76454;
		font-size: 24/7.5vw;
	}
}

.map-right-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 10/7.5vw;
  top: 118/7.5vw;
  width: 80/7.5vw;
  height: 400/7.5vw;
  padding: 10/7.5vw;
  border-radius: 6/7.5vw;
  background-color: #fff;
  box-sizing: border-box;
  color: #666;
  font-size: 20/7.5vw;
  z-index: 1;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), -2px -2px 10px rgba(0, 0, 0, 0.3);
  > a {
    flex: 1;
    border-top: 1px solid #e6e6e6;
    &:nth-of-type(1) {
      border-top: 0;
      img {
        margin-bottom: 15/7.5vw;
      }
    }
    img {
      display: block;
      width: 40/7.5vw;
      margin: 0 auto;
      margin-top: 15/7.5vw;
      &.active {
        display: none;
      }
    }
    &.active {
      img {
        display: none;
        &.active {
          display: block;
        }
      }
    }
  }
}
</style>